<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="../static/css/bootstrap.css" />
    <!--需要在Javascript之前引入JQuer-->
    <script type="text/javascript" src="../static/js/jquery-1.11.0.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script type="text/javascript" src="../static/js/bootstrap.js"></script>
    <!--针对移动设备的样式，为了确保适当的绘制和触屏缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--jquery.cookie.js-->
    <script src="../static/js/jquery.cookie.js"></script>
    <style type="text/css">
        .center-padding {
            width: 1000px;
            margin: 0;
            position: absolute;
            top: 50%;
            left: 60%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            line-height: 1.5;
            display: inline-block;
        }
        .radio-inline-pading{
            padding-left: 25px;
        }

    </style>

</head>

<body style="background-image:url('../static/img/rg_bg.jpg')">

<div class="container center-padding" >
    <div class="row clearfix">
        <div class="col-md-6 column" style="background-color: white;padding: 10px;float: right;">
            <form role="form" action="/user/register" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="InputImgFile"><img alt="140x140" src="../static/img/header/user.PNG" class="img-circle" width="140px" height="140px"/></label>
                    <input type="file" id="InputImgFile" name="InputImgFile"  accept="image/*" required />
                    <p class="help-block">
                       选择你的头像！{{.ext}}
                    </p>
                </div>
                <script>
                     InputImg();
                     function InputImg() {
                         $("#InputImgFile").change(function () {
                             $(".img-circle").cite;
                             var imgName = $(this).val().slice(11,);
                             var imgUrl = "../static/img/header"+imgName;
                             $(".img-circle").attr("src" , imgUrl);
                         });
                     };
                </script>
                <div class="form-group">
                    <label for="inputName">用户名</label>
                    <input type="text" class="form-control" id="inputName" name="Username" placeholder="输入用户姓名" minlength="1" maxlength="10" required title="<font color='red'>警告</font>"
                           data-container="body" data-toggle="popover" data-html="true" data-animation="true" data-content="<h4>用户名名格式错误（仅支持英文小写字母和数字。）</h4>">
                </div>
                <div class="form-group">
                    <label for="inputPasswor">用户密码</label>
                    <input type="text" class="form-control" id="inputPassword" name="Userpasswd" placeholder="输入密码" minlength="6" maxlength="11" required placeholder="以@qq.com结尾的邮箱号码" title="<font color='red'>警告</font>"
                           data-container="body" data-toggle="popover" data-html="true" data-animation="true" data-content="<h4>用户名名格式错误（仅支持英文小写字母和数字。）</h4>">
                </div>
                <div class="form-group">
                    <label for="inputSex">性别: </label>
                        <label class="radio-inline radio-inline-pading">
                            <input type="radio" name="Usex" id="" value="男" checked> 男
                        </label>
                        <label class="radio-inline radio-inline-pading">
                            <input type="radio" name="Usex" id="inlineRadio2" value="女"> 女
                        </label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" />Check me out</label>
                </div>
                <button type="submit" class="btn btn-default">注册</button>
            </form>
            <div style="float: right;">
                <a href="/login">
                    <span class="glyphicon glyphicon-share-alt"> 登录</span>
                </a>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $("#inputName,#inputPassword").blur(function() {
            var value = $(this).val();
            //用户校验
            if($(this).is("#inputName")) {
                if(!(/^[a-z0-9_-]{2,11}$/.test(value))) {
                    $(this).popover('show');
                } else {
                    $(this).popover('hide');
                }
            }
            //	密码校验
            if($(this).is("#inputPassword")) {
                if(!(/^[a-z0-9_-]{6,11}$/.test(value))) {
                    $(this).popover('show');
                } else {
                    $(this).popover('hide');
                }
            }
        }).focus(function() {
            $(this).triggerHandler("blur");
        }).keyup(function() {
            $(this).triggerHandler("blur");
        });
        //  表单绑定事件
        $("form").submit(function() {
            $(".form-control").triggerHandler("focus");
            var length = $(".popover ").length;
            if(length > 0 ) {
                return false;
            }
            return true;
        });
    });
</script>
<script>
    $(function () {
        var StaVal = $.cookie("register");
        if (StaVal == "fail"){
            alert("注册失败，用户名已存在！");
            $.removeCookie("register");
        }
    });
</script>
</body>
</html>